<template>
	<sw-common-frame :count="dataCount" :loading="loading">
		<template slot="button">
			<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
		</template>
		<el-form slot="query" size="small" inline>
			<el-form-item>
				<el-input v-model="queryData.name" clearable placeholder="基本信息名称" style="width: 180px"></el-input>
			</el-form-item>
			<el-form-item>
				<el-select v-model="queryData.type" clearable placeholder="基本信息类型" style="width: 114px">
					<el-option label="文本" value="1"></el-option>
					<el-option label="图片" value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="queryTableData()">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table slot="table" size="medium" :data="tableData" stripe height="100%">
			<el-table-column label="基本信息数据" min-width="320">
				<div class="base_info_title" slot-scope="{ row }">
					<template v-if="row.type === '2'">
						<sw-image-uploader v-model="row.value" size="120" class="image" />
					</template>
					<div class="text">
						<h4>{{ row.label }}</h4>
						<p>{{ row.code }}</p>
						<template v-if="row.type === '1'">
							<p>{{ row.value }}</p>
						</template>
					</div>
				</div>
			</el-table-column>
			<el-table-column label="数据适用类型" min-width="200" :formatter="returnScopeTypeFormatter" />
			<el-table-column label="创建时间" prop="createTime" min-width="160"></el-table-column>
			<el-table-column label="操作" width="132">
				<el-button-group slot-scope="{ row }">
					<el-button size="mini" type="warning" @click="handleOpenDialog(row)">修改</el-button>
					<el-button size="mini" type="danger" @click="handleDeleteData(row)">删除</el-button>
				</el-button-group>
			</el-table-column>
		</el-table>
		<template slot="page">
			<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()"></sw-pagination>
		</template>
		<form-dialog v-model="formDialog" :data="formData" @refresh="queryTableData()"></form-dialog>
	</sw-common-frame>
</template>

<script>
import formDialog from './form';
import { mapGetters } from 'vuex';
import listMixins from '@/mixins/listMixins';
import { getBaseInfoList, deleteBaseInfo } from '@/api/system/sysBaseInfo';
export default {
	mixins: [listMixins],
	components: { formDialog },
	data() {
		return {
			formData: {},
			pageName: '基本信息',
			queryData: { page: 1, limit: 6 }
		};
	},
	computed: {
		...mapGetters(['userInfo']),
		listFunction() {
			return eval(getBaseInfoList);
		},
		deleteFunction() {
			return eval(deleteBaseInfo);
		}
	},
	watch: {
		activeName: {
			handler(val) {
				this.queryTableData();
			},
			immediate: true
		}
	},
	methods: {
		handleOpenDialog(data) {
			this.formDialog = true;
			this.formData = data || {};
		},

		returnScopeTypeFormatter(data) {
			let text = '';
			let attrs = {};
			if (data.scopeType === '1') {
				text = '网站基本信息';
			} else if (data.scopeType === '2') {
				text = '默认图片';
			} else if (data.scopeType === '3') {
				text = '隐藏';
			}
			return this.$createElement('elTag', { attrs }, text);
		}
	}
};
</script>

<style lang="scss" scoped>
.base_info_title {
	display: flex;
	align-items: center;
	.image {
		margin-right: 16px;
	}
	.text {
		display: flex;
		flex-direction: column;
	}
}
</style>
